<template>
  <a-menu-item :key="group[getProp().url]">
    <router-link :to="group[getProp().url]" v-if="group[getProp().outer] == 0">
      <icon-font
        :icon="group[getProp().icon]"
        v-if="group[getProp().icon]"
      ></icon-font>
      <DesktopOutlined v-else />

      <span>{{ group[getProp().name] }}</span>
    </router-link>
    <a :href="group[getProp().url]" target="_blank" v-else>
      <icon-font
        :icon="group[getProp().icon]"
        v-if="group[getProp().icon]"
      ></icon-font>
      <DesktopOutlined v-else />

      <span>{{ group[getProp().name] }}</span>
    </a>
  </a-menu-item>
</template>

<script>
import { Menu } from "ant-design-vue";
import { getProps } from "assets/js/Basic";
import { DesktopOutlined } from "@ant-design/icons-vue";

import IconFont from "components/icon/IconFont";

export default {
  name: "MenuItem",
  props: {
    group: {
      type: Object,
      default: () => {},
    },
    dataProps: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    AMenuItem: Menu.Item,
    IconFont,
    DesktopOutlined,
  },
  methods: {
    getProp() {
      return getProps(this.dataProps);
    },
  },
};
</script>

<style lang="less" scoped>
</style>